<template>
  <div class="layout">
    <div class="title">数据报表</div>
    <div class="container">
      <div class="item">
        <div class="item-title">电池</div>
        <div class="chart" ref="batteryChart"></div>
      </div>
      <div class="item">
        <div class="item-title">负载</div>
        <div class="chart" ref="loadChart"></div>
      </div>
      <div class="item">
        <div class="item-title">太阳能板</div>
        <div class="chart" ref="solarPanelChart"></div>
      </div>
    </div>
    <div class="navigation-buttons">
      <button @click="navigate('back')">Back</button>
      <button @click="navigate('next')">Next</button>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
const commomOption = {
  color: ['#6699ff', '#00ccff', '#eeff00'],
  legend: {
    textStyle: {
      color: function (params) {
        return commomOption.color[params.dataIndex]
      }
    },
    itemGap: 30,
    top: 10,
    left: 'center'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis'
  },
  yAxis: {
    type: 'value',
    splitLine: {
      lineStyle: {
        color: 'rgba(178, 231, 255, 0.1)',
      },
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      textStyle: {
        color: '#ccc'
      }
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    axisLine: {
      lineStyle: {
        color: 'rgba(178, 231, 255, 0.1)',
      }
    },
    axisTick: {
      show: true,
      lineStyle: {
        color: '#ccc'
      }
    },
    axisLabel: {
      textStyle: {
        color: '#ccc'
      }
    }
  },
  seriesOption: {
    type: 'line',
    symbol: 'circle',
    symbolSize: 6,
    lineStyle: {
      width: 1,
    },
  }
}
export default {
  name: 'DataReport',
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
      // Battery chart
      this.initBatteryChart()

      // Load chart
      this.initLoaderChart()

      // Solar panel chart
      this.initSolarPanelChart()
    },

    initBatteryChart() {
      // 定义数据对象
      const chartData = {
        xAxisData: ['00:14', '01:44', '03:14', '04:44', '06:14', '07:44', '08:28'],
        yAxisData: [
          {
            name: '电压',
            data: [20, 25, 28, 25, 25, 30, 25]
          },
          {
            name: '电流',
            data: [0, 0, 0, 0, 0, 0, 5],
          },
        ]
      }
      const series = chartData.yAxisData.map(({ name, data }, index) => ({
        name,
        data,
        ...commomOption.seriesOption
      }))

      const option = {
        ...commomOption,
        series,
      }
      option.xAxis.data = chartData.xAxisData

      const loadChart = echarts.init(this.$refs.loadChart)
      loadChart.setOption(option)

      const batteryChart = echarts.init(this.$refs.batteryChart)
      batteryChart.setOption(option)
    },
    initLoaderChart() {
      // 定义数据对象
      const chartData = {
        xAxisData: ['00:14', '01:44', '03:14', '04:44', '06:14', '07:44', '08:28'],
        yAxisData: [
          {
            name: '电压',
            data: [25, 25, 25, 25, 25, 25, 25]
          },
          {
            name: '电流',
            data: [0, 0, 0, 0, 0, 0, 5],
          },
          {
            name: '功率',
            data: [5, 5, 5, 5, 5, 5, 35],
          },
        ]
      }

      const option = {
        ...commomOption,
        series: chartData.yAxisData.map(({ name, data }, index) => ({
          name,
          data,
          ...commomOption.seriesOption
        }))
      }
      option.xAxis.data = chartData.xAxisData

      const loadChart = echarts.init(this.$refs.loadChart)
      loadChart.setOption(option)
    },
    initSolarPanelChart() {
      // 定义数据对象
      const chartData = {
        xAxisData: ['00:14', '01:44', '03:14', '04:44', '06:14', '07:44', '08:28'],
        yAxisData: [
          {
            name: '电压',
            data: [0, 0, 0, 0, 0, 10, 25]
          },
          {
            name: '电流',
            data: [0, 0, 0, 0, 0, 4, 5],
          },
        ]
      }
      const option = {
        ...commomOption,
        series: chartData.yAxisData.map(({ name, data }, index) => ({
          name,
          data,
          ...commomOption.seriesOption
        }))
      }
      option.xAxis.data = chartData.xAxisData

      const loadChart = echarts.init(this.$refs.loadChart)
      loadChart.setOption(option)

      const solarPanelChart = echarts.init(this.$refs.solarPanelChart)
      solarPanelChart.setOption(option)
    },


    navigate(direction) {
      if (direction === 'back') {
        console.log('Going back')
      } else if (direction === 'next') {
        console.log('Going to next')
      }
    },
  },
};
</script>

<style scoped lang="less">
.layout {
  color: white;
  background: #05213d;
  height: 100vh;
  overflow: hidden;

  .title {
    text-align: center;
    margin: 0 auto;
    font-size: 22px;
  }
}

.container {
  display: flex;

  .item {
    flex: 1;

    .chart {
      height: 80vh;
      margin: 10px 0;
    }
  }
}

.navigation-buttons {
  margin-top: 20px;
}
</style>
